<template>
    <Navbar :stickyTop="stickyTop" />
    <RouterView />
    <Footer :showBack="showBack"></Footer>
</template>

<script lang="ts" setup>
    import Footer from '@/components/footer.vue';
    import Navbar from '@/components/nav.vue';
    import { onMounted, onUnmounted, ref } from 'vue';
    import { useThrottleFn } from '@vueuse/core';

    const stickyTop = ref('top:0px');

    const showBack = ref(false); // 是否显示返回顶部按钮

    const handleScroll = useThrottleFn(() => {
        const scrollTop =
            window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        stickyTop.value = scrollTop > 100 ? 'top:0px' : 'top:-100px';
        showBack.value = scrollTop > 300;
    }, 200);

    onMounted(() => {
        window.addEventListener('scroll', handleScroll, false);
    });

    onUnmounted(() => {
        window.removeEventListener('scroll', handleScroll, false);
    });
</script>
